<template>
  <div class="flexContent1">
    <div class="form_content">
      <el-form style="flex:1;" ref="shopGoodsForm" :disabled="routeType === 'detail'" :rules="shopGoodsFormRules"
        :model="shopGoodsForm" label-position="right" label-width="120px" class="demo-ruleForm">
        <div class="basic">电商商品信息</div>
        <el-row :gutter="24" type="flex">
          <el-col :span="8">
            <el-form-item :label="routeType === 'add' ? '选择商品' : '商品'" prop="commodityName">
              <el-input v-if="routeType === 'add'" v-clearEmoji disabled v-model.trim="shopGoodsForm.commodityName"
                style="width: 60%" placeholder="请输入..." />
              <el-button v-if="routeType === 'add'" style="width: 20%" class="submitBtn"
                @click="selectGoods">选择</el-button>
              <span v-if="routeType !== 'add'">{{ shopGoodsForm.commodityName ? shopGoodsForm.commodityName : '-'
              }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品分类" prop="categroyName">
              <span>{{ shopGoodsForm.categroyName ? shopGoodsForm.categroyName : '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="渠道展示">
              <el-switch active-value="1" inactive-value="0" v-model="shopGoodsForm.isRecommend" active-color="#13ce66"
                inactive-color="#ccc">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" type="flex">
          <el-col :span="8">
            <el-form-item label="商品名称" prop="name">
              <el-input v-clearEmoji v-model.trim="shopGoodsForm.name" style="width: 80%" placeholder="请输入..." />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="副标题" prop="subTitle">
              <el-input v-clearEmoji v-model="shopGoodsForm.subTitle" style="width: 80%" placeholder="请输入..." />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发售库存" prop="releaseStock">
              <el-input v-clearEmoji v-model.trim="shopGoodsForm.releaseStock" style="width: 80%" placeholder="请输入..." />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" type="flex">
          <el-col :span="8">
            <el-form-item label="协议进价" prop="agreedPrice">
              <span>{{ shopGoodsForm.agreedPrice ? shopGoodsForm.agreedPrice : '-' }}元</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="最小单位售价">
              <!-- <el-input v-clearEmoji v-model.trim="shopGoodsForm.salePrice" clearable style="width: 80%"
                placeholder="元" /> -->
              <span>{{ shopGoodsForm.salePrice ? shopGoodsForm.salePrice : '-' }}元</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="每日限购数" prop="limitCount">
              <el-input v-clearEmoji v-model.trim="shopGoodsForm.limitCount" style="width: 80%" placeholder="0为不限购" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" type="flex">
          <el-col :span="8">
            <el-form-item label="出仓价" prop="outboundPrice">
              <span>{{ shopGoodsForm.outboundPrice ? shopGoodsForm.outboundPrice : '-' }}元</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="配送规格价格" prop="normsPrice">
              <span>{{ shopGoodsForm.normsPrice ? shopGoodsForm.normsPrice : '-' }}元</span>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="配送规格" prop="deliveryNorms">
              <span>{{ shopGoodsForm.deliveryNorms ? shopGoodsForm.deliveryNorms : '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="单位" prop="unitName">
              <span>{{ shopGoodsForm.unitName ? shopGoodsForm.unitName : '-' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" type="flex">
          <el-col :span="8">
            <el-form-item label="长图宣传" prop="detailsInfo">
              <div style="width: 80%;height:200px;">
                <mavonEditor ref="md" @imgAdd="imgAdd" :editable="routeType !== 'detail'"
                  v-model="shopGoodsForm.detailsInfo" style="width: 80%;height:100%;" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="排序" prop="sort">
              <el-input v-clearEmoji v-model.trim="shopGoodsForm.sort" style="width: 80%" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="图片" prop="images">
              <el-upload v-if="routeType !== 'detail'" :on-exceed="onExceed" name="multipartFile" :limit="5"
                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" list-type="picture-card"
                :action="action" :data="upData" :file-list="fileList" :headers="headers" :before-remove="delImg"
                :on-error="fileUploadError" class="imgUpload">
                <i size="12" class="el-icon-plus" />
                <br />
                <span class="txt">上传</span>
              </el-upload>
              <!-- <span v-if="!shopGoodsForm.images && routeType === 'detail'">无</span> -->
              <template v-if="routeType === 'detail'">
                <div style="display: flex; width: 80%">
                  <el-image v-for="item in shopGoodsForm.imgUrlList"
                    style="height: 50px;object-fit: cover;border: 1px solid #ccc;" :src="item.url"
                    :preview-src-list="imgUrlList">
                  </el-image>
                  <!-- <div v-if="routeType !== 'detail'" style="
                    width: 50px;
                    height: 50px;
                    border-radius: 5px;
                    border: 1px dashed #ccc;
                    text-align: center;
                    color: #ccc;
                    margin-left: 5px;
                  ">
                  <i style="cursor: pointer" class="el-icon-delete" @click="delImg" />
                </div> -->
                </div>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否上架" prop="publishStatus">
              <el-radio-group v-model="shopGoodsForm.publishStatus" size="small">
                <el-radio label="0">否</el-radio>
                <el-radio label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="btnDiv">
        <el-button v-if="routeType === 'add' || routeType === ''" style="width: 88px;" class="submitBtn"
          @click.stop="addBtn">
          确定
        </el-button>
        <el-button v-if="routeType === 'edit'" class="submitBtn" style="width: 88px;" @click.stop="updateGoodsDetail">
          提交
        </el-button>
        <el-button v-if="routeType !== 'detail'" style="width: 88px;" class="celBtn" @click.stop="cancelbtn">
          取消
        </el-button>
        <el-button v-if="routeType === 'detail'" style="width: 88px;" class="celBtn" @click.stop="cancelbtn">
          返回
        </el-button>
      </div>
      <el-dialog :close-on-click-modal="false" destroy-on-close title="添加商品" :visible.sync="goodsAddDialog" width="70%"
        @close="cancelFn">
        <div class="dinner">
          <el-row :gutter="24" type="flex" style="margin-bottom: 20px;">
            <el-col :span="8">
              <el-input style="width: 100%;" v-clearEmoji @keyup.enter.native="searchFn" clearable
                v-model="searchForm.mnemonic" placeholder="输入商品名称/条码/助记符" />
            </el-col>
            <el-col :span="6">
              <el-cascader ref="cascaderRef" v-model="searchForm.categoryId" filterable clearable placeholder="请选择商品分类"
                :options="options" style="width: 100%;" @change="categoryChange" :props="{
                  value: 'id',
                  label: 'name',
                  checkStrictly: true,
                  emitPath: false,
                }"></el-cascader>
            </el-col>
            <el-col :span="4">
              <el-button style="width: 88px;" class="submitBtn" @click="searchFn">筛选</el-button>
            </el-col>
            <el-col :span="4">
              <el-button style="width: 88px;" class="submitBtn" @click="resetFn">重置</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="24" type="flex" style="margin-bottom: 20px;">
            <el-col :span="24">
              <vxe-table :column-config="{ resizable: true }" border class="tablebox" ref="xTable1"
                :row-config="{ isHover: true }" :scroll-y="{ enabled: true, gt: 21 }" align="center" :data="gridData"
                height="400px" size="medium">
                <vxe-column title="序号" width="80" type="seq" />
                <vxe-column field="commodityName" title="商品名称"
                  :min-width="elTableAdaptationWidth('commodityName', gridData)" />
                <vxe-column field="firstCode" title="商品条码" :min-width="elTableAdaptationWidth('firstCode', gridData)" />
                <vxe-column field="mnemonic" title="助记符" min-width="150" />
                <!-- <vxe-column field="manufacturer" title="生产厂家" /> -->
                <vxe-column title="操作">
                  <template v-slot="{ row }">
                    <el-button type="text" size="small" @click="choseGoods(row)">选择</el-button>
                  </template>
                </vxe-column>
              </vxe-table>
            </el-col>
          </el-row>
          <div class="paginationBox">
            <el-pagination :current-page="page.pageNum" background :page-sizes="$pageSizes" :page-size="page.pageSize"
              layout="total,-> , sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
        </div>
        <!-- <div slot="footer">
          <el-button class="celBtn">取消</el-button>
          <el-button class="addBtn">确定</el-button>
        </div> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { html2md } from '@/utils/html2md'
import { getErpGoodsList, getShopCommodityDetail, addErpCommodity, updateShopCommodity } from '@/api/shopManagement'
import { mavonEditor } from 'mavon-editor'
import { DecimalUtils } from '@/utils/math'
import { getToken } from '@/utils/auth';
import { getCategoryTreeList } from "@/api/goods";
export default {
  name: 'AddshopGoodsGoods',
  components: {
    mavonEditor
  },
  data() {
    return {
      headers: { token: getToken() },
      action: process.env.VUE_APP_UPLOAD_BASE_API + '/file/uploadFile',
      upData: {
        fileType: '0'
      },
      routeType: 'add',
      id: '',
      shopGoodsForm: {
        imgUrlList: [],
        name: '',
        commodityName: '',
        categroyName: '',
        isRecommend: '0', // 是否推荐
        limitCount: '0', // 每日限购数量（个人）
        publishStatus: '1', // 上架状态：0->下架；1->上架
        subTitle: '', // 副标题
        sort: '',
        erpCommodityId: '', // 原Id
        releaseStock: '', //发售库存
        images: '',
        detailsInfo: '', //商品详情
        agreedPrice: '', //协议进价
        salePrice: '', //最小单位售价
        outboundPrice: '', //出仓价
        normsPrice: '', //配送规格价格
        deliveryNorms: '', // 配送规格
        unitName: ''
      },
      shopGoodsFormRules: {
        name: [
          {
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          },
          {
            min: 0,
            max: 50,
            message: '商品名称不能超过50个字符',
            trigger: 'blur'
          }
        ],
        subTitle: [{
          required: true,
          message: '请输入副标题',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 50,
          message: '副标题不能超过50个字符',
          trigger: 'blur'
        }],
        releaseStock: [{
          required: true,
          message: '请输入发售库存',
          trigger: 'blur'
        },
        {
          pattern: /^\+?[0-9]\d*$/,
          message: '请输入正整数',
          trigger: 'blur'
        }],
        salePrice: [{
          required: true,
          message: '请输入最小单位售价',
          trigger: 'blur'
        },
        {
          pattern: /^(([1-9]\d*)|([0][.]{1}[0-9]{0,2})|([1-9]\d*[.]{1}[0-9]{0,2}))$/g,
          message: '最小单位售价只能是数字且小数不能超过两位',
          trigger: 'blur'
        }],
        limitCount: [{
          required: true,
          message: '请输入每日限购数量',
          trigger: 'blur'
        },
        {
          pattern: /^\+?[0-9]\d*$/,
          message: '请输入正整数',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 3,
          message: '每日限购数量应为0-3位数字',
          trigger: 'blur'
        },
        ],
        publishStatus: [{
          required: true,
          message: '请选择上架状态',
          trigger: 'change'
        }],
        sort: [{
          required: true,
          message: '请输入排序',
          trigger: 'blur'
        },
        {
          pattern: /^\+?[0-9]\d*$/,
          message: '请输入正整数',
          trigger: 'blur'
        }],
        images: [{
          required: true,
          message: '请上传商品图片',
          trigger: 'change'
        }],
        normsPrice: [{
          required: true,
          message: '请输入配送规格价格',
          trigger: 'blur'
        }]
      },
      goodsAddDialog: false,
      searchForm: {
        mnemonic: '',
        categoryId: '',
        level: ''
      },
      options: [],
      gridData: [],
      radio: '',
      page: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      },
      isSearch: false,
      fileList: [],
      imgUrlList: [],
      md: ''
    };
  },
  watch: {
    shopGoodsForm: {
      handler(newVal, oldVal) {
        if (newVal.salePrice && newVal.deliveryNorms && this.routeType !== 'detail') {
          const num = DecimalUtils.multiply(newVal.salePrice, newVal.deliveryNorms)
          this.shopGoodsForm.normsPrice = num.toFixed(2);
        } else if (this.routeType == 'detail') {
          return
        } else {
          this.shopGoodsForm.normsPrice = '';
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.routeType = this.$route.query.type ? this.$route.query.type : "add";
    console.log(this.$route.meta.title);
    this.id = this.$route.query?.id;
    if (this.routeType !== 'add') {
      this.getShopCommodityDetail({ id: this.id })
    }
    this.getCategoryTreeList()
  },
  methods: {// 获取分类
    async getCategoryTreeList() {
      const res = await getCategoryTreeList();
      if (res.code === 200) {
        this.options = res.data.categoryList;
        console.log("categoryList", this.categoryList);
      }
      // console.log(res)
    },

    async getErpGoodsList() {
      if (!this.isSearch) {
        this.searchForm = {
          mnemonic: '',
          categoryId: '',
          level: ''
        }
      }
      const res = await getErpGoodsList({
        ...this.page,
        ...this.searchForm
      })
      if (res.code === 200) {
        console.log('res.data', res.data);
        this.gridData = res.data.list
        this.page.total = res.data.total
        this.page.pageNum = res.data.pageNum
        this.page.pageSize = res.data.pageSize
      }
    },
    async getShopCommodityDetail() {
      const res = await getShopCommodityDetail({ id: this.id });
      if (res.code === 200) {
        console.log(res.data, 'res.data');
        this.shopGoodsForm = res.data;
        this.$set(
          this.shopGoodsForm,
          'salePrice',
          String(res.data.salePrice ? res.data.salePrice : 0)
        );
        this.$set(
          this.shopGoodsForm,
          'releaseStock',
          String(res.data.releaseStock ? res.data.releaseStock : 0)
        );
        this.$set(
          this.shopGoodsForm,
          'limitCount',
          String(res.data.limitCount ? res.data.limitCount : 0)
        );
        this.$set(
          this.shopGoodsForm,
          'sort',
          String(res.data.sort ? res.data.sort : 0)
        );

        this.fileList = res.data.imgUrlList.map(item => {
          return {
            url: item,
            name: item,
            uid: item
          }
        })
        if (res.data.detailsInfo) {
          this.md = html2md(res.data.detailsInfo)
        }
        this.shopGoodsForm.detailsInfo = this.md
        console.log('this.md', this.md);
        this.imgUrlList = res.data.imgUrlList
        this.shopGoodsForm.imgUrlList = this.fileList
        console.log('res.data.imgUrlList', res.data.imgUrlList, this.fileList);
      } else {
        // this.$message.error("获取数据失败");
      }
    },
    addBtn() {
      this.shopGoodsForm.detailsInfo = this.$refs.md.d_render
      if (this.shopGoodsForm.imgUrlList.length === 0) {
        this.$message.warning('请先上传图片');
        return;
      } else {
        this.shopGoodsForm.images = this.shopGoodsForm.imgUrlList.map(item => item.url).join(',')
      }
      console.log(' this.shopGoodsForm.images', this.shopGoodsForm.images, this.shopGoodsForm.imgUrlList);
      this.shopGoodsForm.subTitle = this.shopGoodsForm.subTitle.trim()
      this.$refs.shopGoodsForm.validate(async isOk => {
        if (isOk) {
          // console.log('');
          const res = await addErpCommodity(this.shopGoodsForm);
          console.log(res.code);
          if (res.code === 200) {
            this.$message.success('添加成功');
            this.shopGoodsForm.images = ''
            this.shopGoodsForm.imgUrlList = []
            this.fileList = []
            this.shopGoodsForm.salePrice = ''
            this.$refs.shopGoodsForm.resetFields();
            this.closeTag('shopGoodsList');
          } else {
            // this.$message.error(res.message);
          }
        } else {
          this.$message.warning('请检查填写的信息');
        }
      });
    },
    cancelbtn() {
      this.imgUrlList = []
      this.$refs.shopGoodsForm.resetFields();
      this.shopGoodsForm.commodityName = ''
      this.closeTag('shopGoodsGoodsInfo');
    },
    handleAvatarSuccess(res, file) {
      const url = this.$store.getters.imgBaseUrl +
        res.data.filePath +
        res.data.fileNewName;
      this.shopGoodsForm.imgUrlList.push({ url: url, uid: file.uid })
      console.log('this.shopGoodsForm.imgUrlList', this.shopGoodsForm.imgUrlList);
      this.$message.success('上传成功');
    },
    beforeAvatarUpload(file) {
      // console.log('before', file)
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf('.'));
      const isOKType =
        fileType === '.jpg' ||
        fileType === '.png' ||
        fileType === '.jpeg';
      if (!isOKType) {
        this.$message.error('图片格式只能为jpeg/png/jpg');
      }

      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 5MB!');
      }
      return isLt2M && isOKType;
    },
    delImg(file, fileList) {
      // console.log('删除', file, fileList);
      const index = this.shopGoodsForm.imgUrlList.findIndex(item => item.uid === file.uid)
      this.shopGoodsForm.imgUrlList.splice(index, 1)
      // console.log('this.shopGoodsForm.imgUrlList', this.shopGoodsForm.imgUrlList);
    },
    fileUploadError(res) {
      this.$message.error(res.message);
    },
    async updateGoodsDetail() {
      // console.log('this.$refs.md.d_render', this.$refs.md.d_render, this.$refs.md.d_value);
      // return
      this.shopGoodsForm.detailsInfo = this.$refs.md.d_render
      console.log('this.shopGoodsForm.imgUrlList', this.shopGoodsForm.imgUrlList);
      if (this.shopGoodsForm.imgUrlList.length === 0) {
        this.$message.warning('请先上传图片');
        return;
      } else {
        // this.shopGoodsForm.images = this.shopGoodsForm.imgUrlList[0].url
        this.shopGoodsForm.images = this.shopGoodsForm.imgUrlList.map(item => item.url).join(',')
      }
      // return
      this.shopGoodsForm.subTitle = this.shopGoodsForm.subTitle.trim()
      this.$refs.shopGoodsForm.validate(async isOk => {
        if (isOk) {
          const res = await updateShopCommodity(this.shopGoodsForm);
          console.log(res.code);
          if (res.code === 200) {
            this.$message.success('修改成功');
            this.imgUrlList = []
            this.$refs.shopGoodsForm.resetFields();
            this.shopGoodsForm.commodityName = ''
            this.shopGoodsForm.salePrice = ''
            this.$router.push('shopGoodsList');
          } else {
            // this.$message.error(res.message);
          }
        } else {
          this.$message.warning('请检查填写的信息');
        }
      });
    },
    selectGoods() {
      this.goodsAddDialog = true
      this.mnemonic = {
        name: '',
        categoryId: '',
        level: ''
      }
      this.getErpGoodsList()
    },
    categoryChange(e) {
      const nodes = this.$refs.cascaderRef.getCheckedNodes();
      this.searchForm.level = nodes[0]?.level;
    },
    // 获取条数改变
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.pageNum = 1;
      console.log(`每页 ${val} 条`);
      this.getErpGoodsList();
    },
    // 获取页数改变
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.pageNum = val;
      this.getErpGoodsList();
    },
    searchFn() {
      this.isSearch = true;
      this.page.pageNum = 1;
      this.getErpGoodsList();
    },
    resetFn() {
      this.isSearch = false
      this.page.pageNum = 1;
      this.getErpGoodsList();
    },
    async choseGoods(row) {
      // const res = await getErpCommodityDetail({ id: row.id })
      // if (res.code === 200) {
      this.shopGoodsForm.imgUrlList = []
      this.fileList = []
      console.log('res.datadsadas', row);
      this.goodsAddDialog = false
      console.log('this.shopGoodsForm', this.shopGoodsForm.unitName);
      this.shopGoodsForm.unitName = row.unitName
      this.shopGoodsForm.agreedPrice = row.agreedPrice
      this.shopGoodsForm.categroyName = row.categroyName
      this.shopGoodsForm.commodityName = row.commodityName
      this.shopGoodsForm.outboundPrice = row.outboundPrice
      this.shopGoodsForm.salePrice = row.outboundPrice
      this.shopGoodsForm.deliveryNorms = row.deliveryNorms
      this.shopGoodsForm.erpCommodityId = row.erpCommodityId
      this.shopGoodsForm.name = row.commodityName
      if (row.images) {
        console.log('row.images', row.images);
        this.shopGoodsForm.imgUrlList.push({ url: row.images, uid: row.images })
        // this.shopGoodsForm.imgUrlList.push(row.images)
        // this.imgUrlList.push(row.images)
        this.fileList.push({ url: row.images, uid: row.images })
      }
      // }
    },
    onExceed() {
      this.$message.warning('最多上传5张图片');
    },
    cancelFn() {
      this.searchForm = {
        mnemonic: '',
        categoryId: '',
        level: ''
      }
      this.goodsAddDialog = false

    },
    /*
     * position:对应的图片索引
     * $file：对应的图片文件
     * $img2Url方法语法： $img2Url(索引, 替换url)；
     * $img2Url方法作用：会将markdown中使用该索引的位置自动替换为该url;
     */
    imgAdd(position, $file) {
      var formdata = new FormData();
      formdata.append('multipartFile', $file);
      formdata.append('fileType', 0);
      axios({
        url: process.env.VUE_APP_UPLOAD_BASE_API + '/file/uploadFile',
        method: 'post',
        data: formdata,
        headers: { 'Content-Type': 'multipart/form-data', token: getToken() },
      }).then((res) => {
        console.log('url', res, res.data.filePath);
        const url = this.$store.getters.imgBaseUrl +
          res.data.data.filePath +
          res.data.data.fileNewName;
        this.$refs.md.$img2Url(position, url);
      })
    },
  }
};
</script>


<style scoped lang="scss">
.btnDiv {
  display: flex;
  // text-align: right;
  // padding-left: 90%;
  justify-content: end;

}

.flexContent1 {
  // padding: 32px;
  height: 100%;

  /* background-color: #fff; */
  .form_content {
    padding: 32px;
    height: 100%;
    // padding-top: 50px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .imgUpload {
      ::v-deep .el-upload:hover {
        border-color: #409eff;
      }

      ::v-deep .el-upload {
        position: relative;
        margin-bottom: 10px;
        margin-left: 5px;
        width: 70px;
        height: 70px;
        line-height: 30px;
        padding-top: 5px;
      }

      ::v-deep .el-upload-list__item {
        width: 70px;
        height: 70px;
      }

      .txt {
        color: #595858;
        font-size: 12px;
      }
    }
  }
}

.basic {
  font-family: PingFang SC, PingFang SC;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.9);
  margin-bottom: 32px;
}

.el-upload--picture-card i {
  font-size: 12px !important;
}

.el-button--small {
  padding: 9px 0;
}

::deep el-button {
  text-align: center;
}

// .el-row {
//   margin-bottom: 20px;

//   &:last-child {
//     margin-bottom: 0;
//   }
// }

.el-form-item--small.el-form-item {
  margin-bottom: 36px !important;
}

// ::v-deep .el-icon-circle-close:before {
//   color: #fff;
// }

::v-deep .el-input__suffix {
  color: #464242;
}
</style>
<!-- <style>
@import 'mavon-editor/dist/css/index.css'
</style> -->